<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            overflow: hidden;
            height: 42px;
        }

        li {
            float: left;
            width: 370px;
            list-style: none;
        }

        .tit {
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 36px;
            height: 42px;
        }

        .duo {
            background-repeat: no-repeat;
            background-position: 0 -192px;
            background-image: url(../img/pic1.png);
        }

        .kuai {
            background-repeat: no-repeat;
            background-position: -41px -192px;
            background-image: url(../img/pic1.png);
            margin-left: 370px;
        }

        .hao {
            background-repeat: no-repeat;
            background-position: -82px -192px;
            background-image: url(../img/pic1.png);
            margin-left: 740px;
        }

        .sheng {
            background-repeat: no-repeat;
            background-position: -123px -192px;
            background-image: url(../img/pic1.png);
            margin-left: 1120px;
        }

        .ul1 {
            overflow: hidden;
            height: 42px;
            margin-top: 500px;
            margin-left: 450px;
        }


        .li1 {
            float: left;
            width: 297px;
            list-style: none;

        }

        .a {
            overflow: hidden;
            position: absolute;
            /* left: 0;
            top: 0; */
            width: 102px;
            height: 30px;
        }

        .b {
            background-repeat: no-repeat;
            background-position: 0px -156px;
            background-image: url(../img/pic1.png);
        }

        .b1 {
            background-repeat: no-repeat;
            background-position: 0px -156px;
            background-image: url(../img/pic1.png);
            margin-left: 102px;
        }

        .b2 {
            background-repeat: no-repeat;
            background-position: 0px -156px;
            background-image: url(../img/pic1.png);
            margin-left: 204px;
        }

        .b3 {
            background-repeat: no-repeat;
            background-position: 0px -156px;
            background-image: url(../img/pic1.png);
            margin-left: 306px;
        }

        .b4 {
            background-repeat: no-repeat;
            background-position: 0px -156px;
            background-image: url(../img/pic1.png);
            margin-left: 408px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="unit ">
                <h5 class="duo tit"></h5>
                <p class="text">品类齐全，轻松购物</p>
            </div>
        </li>
        <li>
            <div>
                <h5 class="kuai tit"></h5>
                <p class="text">多仓直发，急速配送</p>
            </div>
        </li>
        <li>
            <div>
                <h5 class="hao tit"></h5>
                <p class="text">正品行货，精致服务</p>
            </div>
        </li>
        <li>
            <div>
                <h5 class="sheng tit"></h5>
                <p class="text">天天低价，畅选无忧</p>
            </div>
        </li>
    </ul>
    <ul class="ul1">
        <li class="li1">
            <div class="c">
                <h5 class="a b"></h5>
            </div>
        </li>
        <li>
            <div class="c">
                <h5 class="a b1"></h5>
            </div>
        </li>
        <li>
            <div class="c">
                <h5 class="a b2"></h5>
            </div>
        </li>
        <li>
            <div class="c">
                <h5 class="a b3"></h5>
            </div>
        </li>
        <li>
            <div class="c">
                <h5 class="a b4"></h5>
            </div>
        </li>
    </ul>

</body>

</html>